<template>
  <custom-modal
    default-footer
    :visible="visible"
    :loading-ok="loadingOk"
    :title="title"
    :handle-ok="handleOk"
  >
    <a-form
      ref="formRef"
      style="margin-top: 10px"
      layout="vertical"
      :model="formState"
      :rules="rules"
    >
      <a-form-item label="选择发起方式">
        <a-radio-group v-model:value="formState.sponsorType">
          <a-radio-button value="auto">自动</a-radio-button>
          <a-radio-button style="margin-left: 10px" value="manual">手动</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        v-if="formState.sponsorType === 'auto'"
        label="选择自动发起时间"
        name="autoSponsorDate"
      >
        <a-date-picker v-model:value="formState.autoSponsorDate" type="date" placeholder="请选择" />
      </a-form-item>
      <a-form-item label="输入数据日期" name="dataDate">
        <a-input v-model:value="formState.dataDate" placeholder="请输入数据日期" />
      </a-form-item>
    </a-form>
  </custom-modal>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, toRefs, UnwrapRef } from 'vue'
  import { Modal, Button, Form, Input, Radio, DatePicker } from 'ant-design-vue'
  import CustomModal from '@/components/CustomModal.vue'
  import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
  import { sponsorDirectoryFlow } from '@/api/directory'
  import { startMethodChinese2CodeMap } from './index.data'

  interface FormState {
    autoSponsorDate: string
    dataDate: string
    sponsorType: string
    dirId: string
    dirPushDate: string
  }
  export default defineComponent({
    name: 'SponsorModal',
    components: {
      CustomModal,
      [Modal.name]: Modal,
      [DatePicker.name]: DatePicker,
      [Radio.Group.name]: Radio.Group,
      [Radio.Button.name]: Radio.Button,
      [Form.name]: Form,
      [Form.Item.name]: Form.Item,
      [Input.name]: Input,
      [Button.name]: Button
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      fields: {
        type: Object,
        default: () => ({})
      }
    },
    setup(props) {
      const formRef = ref()
      // console.log(query)
      const formState: UnwrapRef<FormState> = reactive({
        autoSponsorDate: '',
        dataDate: '',
        sponsorType: 'auto',
        dirId: '',
        dirPushDate: ''
      })
      const state = reactive({
        visible: true,
        loadingOk: false
      })

      const rules = {
        autoSponsorDate: [
          { required: true, message: '请选择自动发起时间', trigger: 'change', type: 'date' }
        ],
        dataDate: [{ required: true, message: '请输入数据日期', trigger: 'blur' }]
      }

      console.log(props.fields)
      const checkForm = () => {
        return new Promise((resolve) => {
          formRef.value
            .validate()
            .then(() => {
              sponsorDirectoryFlow({
                dirId: props.fields.dirId,
                dirPeriodDate: formState.dataDate, // 数据日期
                dirStartDate: formState.autoSponsorDate, // 自动发起时间
                dirPushDate: props.fields.reportTime, //推送时间
                dirStartStatus: startMethodChinese2CodeMap(formState.sponsorType) // 发起状态(0:自动 1:手动)
              }).then(() => {
                console.log('success')
              })
            })
            .catch((error: ValidateErrorEntity<FormState>) => {
              console.log('error', error)
            })
        })
      }

      const handleOk = () => {
        checkForm().then(() => {
          state.loadingOk = true
          setTimeout(() => {
            state.loadingOk = false
            state.visible = false
          }, 2000)
        })
      }

      return {
        ...toRefs(state),
        handleOk,
        formRef,
        formState,
        rules
      }
    }
  })
</script>

<style lang="scss" scoped></style>
